<template>
  <div>
    <KunkkaSimpleTable
      :name="name"
      :handle="handle"
      :columns="columns"
      :data="data"
      :height="height"
      :single="false"
      :selection="true"
      :tag-show="false"
      :pagination="pagination"
      :is-table-setting="true"
      hasrightclickmenu
      @toParentOfdraggable="toParentOfdraggable"
      @toggleTableHeihgt="toggleTableHeihgt"
      @toggleSelectRow="toggleSelectRow"
      @cell-dblclick="cellDbClick"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @paginationCall="paginationCall"
      @getTableSetting="getTableSetting"
    >
      <template v-slot:prop2="{ scope, item }">
        <span>{{ scope.row[item.prop] }}</span>
      </template>
    </KunkkaSimpleTable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'simpleTable',
      height: 0,
      pagination: {
        page: 1,
        rows: 100,
        total: 1000
      },
      columns: [{
        prop: 'prop1',
        label: 'prop1',
        show: true,
        fixed: ''
      },
      {
        prop: 'prop2',
        label: 'prop2',
        show: true,
        fixed: '',
        slot: 'prop2'
      },
      {
        prop: 'prop3',
        label: 'prop3',
        show: true,
        fixed: ''
      },
      {
        prop: 'prop4',
        label: 'prop4',
        show: true,
        fixed: ''
      },
      {
        prop: 'prop5',
        label: 'prop5',
        show: true,
        fixed: 'right'
      }
      ],
      // columns: Array.from({ length: 5 }, (_, idx) => ({
      //   prop: `prop${idx + 1}`,
      //   label: `prop${idx + 1}`,
      //   show: true
      //   // fixed: ''
      // })),
      data: Array.from({ length: 10 }, (_, idx) => ({
        'prop1': `1-${idx}`,
        'prop2': `2-${idx}`,
        'prop3': `3-${idx}`,
        'prop4': `4-${idx}`,
        'prop5': `5-${idx}`
      })),
      handle: [
        {
          label: '新增',
          vaild: true,
          icon: 'el-icon-plus',
          class: 'beautifulAdd',
          type: 'primary'
        },
        {
          label: '修改'
        }
      ],
      timelineList: null,
      rightComplete: false,
      leftComplete: false
    }
  },
  computed: {
    selectRow() {
      return []
    }
  },
  mounted() {

  },
  methods: {
    toggleTableHeihgt(height) {
      this.height = height
      // alert(height)
    },
    toggleSelectRow(data) {
      console.log(data)
      this.selectRow = data
    },
    cellDbClick(a, b, c) {
      console.log(a, b, c)
    },
    handleCurrentChange(val) {
      console.log(val)
    },
    handleSizeChange(val) {
      console.log(val)
    },
    paginationCall(val) {
      console.log('#####')
    },
    getTableSetting(data) {
      console.log(data)
    },
    toParentOfdraggable(columns) {
      // this.$set(this, 'list', this.list)
      // this.columns = columns
      this.$set(this, 'columns', [...columns])
    }
  }
}
</script>
<style lang="scss">
.Kunkka-collapse-form {
  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
</style>
